<template>
  <el-dialog
    title="拍照"
    :visible.sync="dialogVisible"
    width="80%"
    :close-on-click-modal="false"
    :before-close="close"
  >
    <div class="box">
      <video autoplay></video>
      <div>
        <canvas v-if="imgSwait" ref="canvas" width="240" height="360"></canvas>
      </div>
    </div>
    <div class="div">
      <el-button @click="takePhoto">拍照</el-button>
      <el-button @click="savePhoto">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
    import { remote } from 'electron'
    import fs from 'fs'
    import dialogEditMixin from '@/mixins/dialogEdit'
    export default {
        mixins: [dialogEditMixin],
        data() {
            return {
                imgSwait: false,
                dialog: {},
                canvas: {},
                photoData: '',
                video: {},
            }
        },
        beforeDestroy () {
            this.photoData = null
        },
        methods: {
            //用于初始化视频流
            initialize () {
                const that = this
                this.dialog = remote.dialog
                this.$nextTick(() => {
                    this.video = window.document.querySelector('video')
                    window.navigator.mediaDevices.getUserMedia({
                        video: { facingMode: "user", width: 640, height: 360 } // 调用前置摄像头并设置尺寸大小 后置摄像头使用video: { facingMode: { exact: "environment" }
                    }).then(function(stream) {
                        that.video.srcObject = stream
                        that.video.play()
                    }).catch(function(err) {
                        console.log(`连接视频流错误: ${err}`)
                    })
                })
            },
            //弹出对话框保存图像
            async savePhoto () {
                const now_time = new Date().getTime()
                const filePath = String(now_time) + '.jpg'
                //显示保存对话框保存图像
                let data = await this.dialog.showSaveDialog({
                    title: "保存照片",
                    defaultPath: filePath,
                    buttonLabel: '保存'
                })
                // 判断是否点击保存
                if (data.canceled === false) {
                    // 判断是否返回路径
                    if (data.filePath) {
                        //向文件写入 base 64 格式的图像数据
                        fs.writeFile(data.filePath, this.photoData, 'base64', (err) => {
                            if (err) {
                                this.$message({
                                    message: `保存图像有问题: ${err.message}`,
                                    type: 'warning'
                                })
                                this.photoData = null
                                return false
                            }
                            this.imgSwait = false
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                        })
                    }
                }
            },
            //拍照
            async takePhoto () {
                this.imgSwait = true
                this.$nextTick(() => {
                    this.canvas = window.document.querySelector('canvas')
                    //将当前的视频图像绘制在 canvas 上 
                    this.canvas.getContext('2d').drawImage(this.video, 0, 0, 240, 360)
                    
                    //获取  base64 格式的图像数据
                    this.photoData = this.canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg|jpeg);base64,/, '')
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        display: flex;
        justify-content: center;
        video {
            width: 240px;
            margin-right: 30px;
            border: 1px solid #ccc;
        }
        div {
            border: 1px solid #ccc;
            width: 240px;
            height: 360px;
            display: flex;
            align-items: center;
        }
    }
    .div {
        display: flex;
        justify-content: center;
    }
</style>
